<template>
	<view>
		<view class="orderBox" v-for="(item, index) in dataList">
			<view class="orderTitle">
				<span class="one">{{ index + 1 }}.</span>
				<span class="two">工单编号：{{ item.reportNo }}</span>
			</view>
			<view class="itemBox" @click.stop="openPopup(item, 'orderDetails', false)">
				<view class="itemContent">
					<view class="itemTitle">工单类型:</view>
					<view class="itemValue ellipsis">{{ item.reportType ? '报工单' : '送货单' }}</view>
				</view>
				<view class="itemContent ">
					<view class="itemTitle">运营方确认状态:</view>
					<view class="itemValue ellipsis">
						<span v-show="item.confirmStatus == 1">已确认</span>
						<span v-show="item.confirmStatus == 0">待确认</span>
						<span v-show="item.confirmStatus == -1">已驳回</span>
					</view>
				</view>
				<view class="itemContent ">
					<view class="itemTitle">创建时间:</view>
					<view class="itemValue ellipsis">{{ item.createTime || '--' }}</view>
				</view>
			</view>
			<view class="btnBox">
				<!-- <view  @click="openPopup(item, 'orderDetails', false)" class="btn">查看详情</view> -->
				<view v-show="!item.commitStatus" @click="!item.commitStatus && openPopup(item, 'commitOrder', true)"
					class="btn">{{ item.commitStatus ?
			'已经提交' : '提交确认' }}</view>
				<view v-show="item.confirmStatus !== 1" @click.stop="openPopup(item, 'handleEdit', false, 'edit')"
					class="btn">编辑</view>
				<view v-show="item.confirmStatus ==-1" @click.stop="openPopup(item, 'handleRejectionCause', true)"
					class="btn reject">驳回原因</view>
				<view v-show="item.confirmStatus !== 1" @click.stop="openPopup(item, 'handleDel', true)"
					class="btn reject">删除</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<uni-popup ref="popupReject">
			<view class="popup-content">
				<view class="content">
					<!-- 删除 -->
					<view v-show="callBackName == 'handleDel'">
						<view class="title">提示</view>
						<view class="form">
							此操作将永久删除该文件, 是否继续?
						</view>
					</view>
					<!-- 提交 -->
					<view v-show="callBackName == 'commitOrder'">
						<view class="title">提示</view>
						<view class="form">
							您是否要将工单提交给运营方确认?
						</view>
					</view>
					<view v-show="callBackName == 'handleRejectionCause'">
						<view class="title">驳回原因</view>
						<view class="form">
							{{orderInfo.rejectReason}}
						</view>
					</view>
					<view class="btnList">
						<button class="submitBtn" @click="sumitData">确 认</button>
						<button @click="close">取 消</button>
					</view>
				</view>
				<view class="closeBtn" @click="close">
					<uni-icons type="close" class="uniIcon" size="40"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import workOrderApi from '@/api/socialized-servce/person-message/work-order.js'
export default {
	components: {},
	props: {
		dataList: {
			type: Array,
			default: () => {
				return [];
			},
		},
		reportExecuteId: {
			type: Array,
			default: () => {
				return [];
			},
		},
	},
	data() {
		return {
			modalshow: false,
			modalTilte: '',
			rejectReason: '',
			callBackName: '',
			orderInfo: {},
			titleColor: '',
		}
	},
	methods: {
		open() {
			this.$refs.popupReject.open()
		},
		close() {
			this.$refs.popupReject.close()
		},
		sumitData() {
			this[this.callBackName]();
		},
		openPopup(row, callBackName, isOpenPopup, addEditFlag) {
			console.log(row, callBackName, isOpenPopup, addEditFlag)
			this.orderInfo = { ...row };
			this.callBackName = callBackName;
			this.addEditFlag = addEditFlag || '';
			isOpenPopup && this.open();
			!isOpenPopup && this[this.callBackName]();
		},
		//运营方确认
		commitOrder() {
			let id = this.orderInfo.id;
			if (this.orderInfo.commitStatus) {
				uni.showToast({
					title: '已经提交待运营方确认',
					icon: 'loading'
				});
				return
			}
			workOrderApi.commit(id).then(res => {
				if (res.code == 200) {
					this.$emit('resetList');
					this.close();
					uni.showToast({
						title: '操作成功',
						icon: 'loading'
					});
				} else {
					uni.showToast({
						title: res.msg || '操作失败',
						icon: 'none'
					});
				}
			}).catch(err => {
				uni.showToast({
					title: err || '操作失败',
					icon: 'none'
				});
			})
		},
		handleRejectionCause(){
			this.close();
		},
		handleDel() {
			let id = this.orderInfo.id;
			// this.$emit('delItem', id);
			// this.close();
			// return
			workOrderApi.delById(id).then(res => {
				if (res.code == 200) {
					this.$emit('delItem', id);
					this.close();
					uni.showToast({
						title: '操作成功',
						icon: 'loading'
					});
				} else {
					uni.showToast({
						title: res.msg || '操作失败',
						icon: 'none'
					});
				}
			}).catch(err => {
				uni.showToast({
					title: err || '操作失败',
					icon: 'none'
				});
			})
		},
		//详情
		orderDetails() {
			let url = '/pages/socialized-service/work-order/order-details'
			this.$togo(url, {
				reportNo: this.orderInfo.reportNo,
				reportType: this.orderInfo.reportType,
			})
		},
		//编辑
		handleEdit() {
			let url = '/pages/socialized-service/work-order/delivery-add-edit'
			this.$togo(url, {
				reportNo: this.orderInfo.reportNo,
				reportType: this.orderInfo.reportType,
				addEditFlag: this.addEditFlag
			})
		},

	}

}
</script>

<style lang="scss" scoped>
.ellipsis {
	display: block;
	white-space: nowrap; //不换行
	overflow: hidden; //超出部分隐藏
	text-overflow: ellipsis; //文本溢出显示省略号
}

.orderBox {
	width: 684rpx;
	background-color: #ffffff;
	padding: 12rpx 14rpx 20rpx;
	box-sizing: border-box;
	margin: 0rpx auto;
	margin-top: 30rpx;
	left: 0rpx;
	top: 0rpx;
	width: 684rpx;
	opacity: 1;
	border-radius: 16rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.05);

	.orderTitle {
		height: 42rpx;
		font-size: 26rpx;
		font-weight: bold;
		letter-spacing: 0rpx;
		line-height: 42rpx;
		color: rgba(39, 39, 39, 1);
		text-align: left;
		display: flex;
		justify-content: flex-start;

		.one {
			margin-left: 10rpx;
		}

		.two {
			display: block;
			white-space: nowrap; //不换行
			overflow: hidden; //超出部分隐藏
			text-overflow: ellipsis; //文本溢出显示省略号
			width: calc(100% - 140rpx);
		}

		.three {
			width: 100rpx;
			color: rgba(46, 205, 151, 1);
		}
	}

	.itemBox {
		margin: 10rpx auto 0rpx;
		width: 622rpx;
		opacity: 1;
		border-radius: 10rpx;
		background: rgba(245, 246, 250, 1);
		padding: 12rpx 12rpx 12rpx 18rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.itemContent {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			color: rgba(39, 39, 39, 1);

		}

		.itemTitle {
			width: 220rpx;
		}

		.itemValue {
			width: calc(100% - 220rpx);
		}
	}

	.btnBox {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #ffffff;
		margin-top: 20rpx;

		.btn {
			border-radius: 30rpx;
			padding: 10rpx 30rpx;
			text-align: center;
			margin-left: 8rpx;
			border: 1px solid rgb(136, 172, 255);
			color: rgba(136, 172, 255, 1);
			// background: linear-gradient(270deg, rgba(136, 172, 255, 1) 0%, rgba(33, 101, 255, 1) 100%);
		}

		.reject {
			border: 1px solid rgb(247, 3, 60);
			color: rgb(247, 3, 60);
			// background: linear-gradient(270deg, rgba(249, 170, 170, 1) 0%, rgba(255, 108, 108, 1) 100%);
		}
	}
}

.popup-content {
	width: 90vw;
	border-radius: 3vw;
	background-color: #ffffff;
	position: relative;

	.closeBtn {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 30%);

		.uniIcon {
			color: #e5e5e5 !important;
			font-weight: 100 !important;
		}
	}

	.content {
		width: 100%;
		border-radius: 3vw;
		overflow: hidden;
	}

	.title {
		margin-top: 5vw;
		margin-bottom: 6vw;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}

	.form {
		min-height: 8vh;
		padding: 3vw 5vw;
	}

	.btnList {
		border-top: 1px solid #e5e5e5;
		display: flex;

		button {
			width: 50%;
			border-right: 1px solid #e5e5e5;
			border-radius: 0;
		}

		.submitBtn {
			color: rgb(0, 149, 255);
		}
	}
}
</style>